<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="rules">
      <el-form-item>
        <div class="title">西洲医院一体化智慧中心</div>
      </el-form-item>
      <el-form-item prop="account">
        <el-input
          v-model="loginForm.account"
          placeholder="请输入您的用户名/邮箱"
          size="middle"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          placeholder="请输入您的密码"
          type="password"
          show-password
          size="middle"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="handleLogin('loginForm')"
          type="primary"
          size="middle"
          >下一步</el-button
        >
      </el-form-item>
      <el-form-item>
        <div style="display: flex; justify-content: flex-start">
          <input @change="select" type="checkbox" />
          <div>
            我已阅读并同意<span style="color: #429fff; margin: 0 10px"
              >服务协议</span
            >和<span style="color: #429fff; margin: 0 10px">隐私政策</span>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { api_users_login } from "@/apis/login";
import local from "@/utils/local";
export default {
  data() {
    return {
      checked: false,
      loginForm: {
        account: "pharmacy",
        password: "p123456",
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    select(e) {
      this.checked = e.target.checked;
    },
    handleLogin(loginForm) {
      this.$refs[loginForm].validate(async (valid) => {
        if (valid) {
          if (this.checked) {
            let res = await api_users_login(this.loginForm);
            console.log(res);
            if (res.data.code === 1) {
              this.$store.commit("getUser", res.data);
              local.set("userInfo", res.data);
              this.$router.push("/home");
            }
          } else {
            this.$message.error("请先勾选协议");
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-form {
    width: 400px;
    background-color: #fff;
    padding: 40px;
    border-radius: 15px;

    .el-form-item {
      .title {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
      }

      .el-button {
        width: 100%;
      }
    }
  }
}
</style> 